Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: introduced base website redesign layouts #6145

Merged
merged 26 commits into from
Dec 1, 2023
Merged

feat: introduced base website redesign layouts #6145

merged 26 commits into from
Dec 1, 2023

Conversation

ovflowd
Copy link
Member

@ovflowd ovflowd commented Nov 28, 2023

Description

image

image

This PR introduces a significant milestone to the Node.js Website Redesign; As we get closer to the release of the Node.js Website Redesign.

Ability to switch between Redesign <> Legacy

One of this Pull Request changes is introducing a new feature flag through an environment variable. It allows you to start Next.js on either serving with the Website Redesign Layouts or the Legacy Layouts.

The website redesign mode is primarily helpful for validating the implementation of layouts. You can now start a development mode for Website Redesign with npm run serve:redesign or npx turbo serve:redesign.

Updates on Shared Client Context

Our own in-house React Cache now also stores the reading time of a specific page (Markdown file) and the original filename (markdown file) besides the already existing context.

Updated Navigation Hooks

This Pull Request refactored how we store Navigation entries on navigation.json by now separating them with "top navigation" and "side navigation" items. The usages and mapping and types also got refreshed and improved. The respective translations also got updated.

Updated Redesign Components

Specific Website Redesign Components (such as Select, MetaBar, SideBar and others) got updated to accommodate the needs of the Website Redesign better and got some design fixes.

Introduction of the Base, Default, and Article Layouts

This Pull Request introduced the new Base Layout, Default Layout, Article Layout and About Layout for the Node.js Website Redesign.

These introduce base global style changes, introduce the layouts, their app-bounded logic and their respective "providers" that connect the "Common" generic components with real App-data.

These Layouts are pretty much ready, responsive and following all Figma specifications.

Validation

The Legacy Website should still work as expected. Locally the About and Get Involved pages should have finished Layouts for Website Redesign.

@ovflowd ovflowd requested review from a team as code owners November 28, 2023 22:13
@vercel Vercel
Copy link

vercel bot commented Nov 28, 2023 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
nodejs-org ✅ Ready (Inspect) Visit Preview 💬 Add feedback Dec 1, 2023 3:44pm

@ovflowd ovflowd added website redesign Issue/PR part of the Node.js Website Redesign feature-request Requesting a new Technological Feature to be added to the Website infrastructure Issues/PRs related to the Repository Infra labels Nov 28, 2023
@github-actions GitHub Actions
Copy link

Note

Your Pull Request seems to be updating Translations of the Node.js Website.

Whilst we appreciate your intent; Any Translation update should be done through our Crowdin Project.
We recommend giving a read on our Translation Guidelines.

Thank you!

@ovflowd ovflowd added the github_actions:pull-request Trigger Pull Request Checks label Nov 28, 2023
@github-actions github-actions bot removed the github_actions:pull-request Trigger Pull Request Checks label Nov 28, 2023
@github-actions GitHub Actions
Copy link

github-actions bot commented Nov 28, 2023 •
edited
Loading

Lighthouse Results

URL Performance Accessibility Best Practices SEO Report
/en 🟢 99 🟢 97 🟢 92 🟢 92 🔗
/en/about 🟢 100 🟢 95 🟢 92 🟢 92 🔗
/en/about/previous-releases 🟢 98 🟢 93 🟢 92 🟢 92 🔗
/en/download 🟢 100 🟢 95 🟢 92 🟢 92 🔗
/en/blog 🟢 100 🟢 95 🟢 92 🟢 92 🔗

@ovflowd ovflowd added the github_actions:pull-request Trigger Pull Request Checks label Nov 28, 2023
@github-actions github-actions bot removed the github_actions:pull-request Trigger Pull Request Checks label Nov 28, 2023
@github-actions GitHub Actions
Copy link

github-actions bot commented Nov 28, 2023 •
edited
Loading

Unit Test Coverage Report

Lines Statements Branches Functions
Coverage: 94%
 89.47% (374/418) 81.1% (103/127) 87.34% (69/79)

Unit Test Report

Tests Skipped Failures Errors Time
71 0 💤 0 ❌ 0 🔥 4.705s ⏱️

@AugustinMauroy
Copy link
Contributor

AugustinMauroy commented Nov 29, 2023 •
edited
Loading

Capture d’écran 2023-11-29 à 09 28 00

hmm strange behaviour i spoke about the highight

@AugustinMauroy
Copy link
Contributor

we can also remove .hbs form layout name in this pr.

@AugustinMauroy
Copy link
Contributor

also I don't saw on pr description why all locale files had ben remove. it's need for crowdin ?

@ovflowd
Copy link
Member Author

ovflowd commented Nov 29, 2023

also I don't saw on pr description why all locale files had ben remove. it's need for crowdin ?

Right, the locales config files are created on Crowdin.

@ovflowd
Copy link
Member Author

ovflowd commented Nov 29, 2023

Capture d’écran 2023-11-29 à 09 28 00 hmm strange behaviour _i spoke about the highight_

That is expected. We don't have styling for Codeboxes yet on the redesign :)

@ovflowd
Copy link
Member Author

ovflowd commented Nov 29, 2023

cc @nodejs/nodejs-website I need some extensive review here. Mostly on the layouts. I'm not sure if I'm adhering best practices for Tailwind and I might have also added one or two non-necessary styles.

AugustinMauroy
AugustinMauroy reviewed Nov 29, 2023
View reviewed changes
tailwind.config.ts Outdated Show resolved Hide resolved
@ovflowd ovflowd added the github_actions:pull-request Trigger Pull Request Checks label Nov 29, 2023
@github-actions github-actions bot removed the github_actions:pull-request Trigger Pull Request Checks label Nov 29, 2023
@ovflowd ovflowd force-pushed the feast/website-redesign-base-layouts branch from ccfcbf5 to 5c87ae1 Compare November 30, 2023 22:26
@ovflowd ovflowd added the github_actions:pull-request Trigger Pull Request Checks label Nov 30, 2023
@github-actions github-actions bot removed the github_actions:pull-request Trigger Pull Request Checks label Nov 30, 2023
@ovflowd
Copy link
Member Author

ovflowd commented Dec 1, 2023

Hey @nodejs/nodejs-website I'm still waiting for more reviews here :) this is a big change (but mostly doesn't affect the current website, by exception of the "Previous Releases" table.

I would love more reviews here. (btw @canerakdas lmk if you feel the styles are 👌 by your standards 👀)

AugustinMauroy
AugustinMauroy approved these changes Dec 1, 2023
View reviewed changes
Copy link
Contributor

@AugustinMauroy AugustinMauroy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

on my side it's LGTM

canerakdas
canerakdas approved these changes Dec 1, 2023
View reviewed changes
Copy link
Member

@canerakdas canerakdas left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, clean and forward-looking implementation ✨

@canerakdas canerakdas added the github_actions:pull-request Trigger Pull Request Checks label Dec 1, 2023
@github-actions github-actions bot removed the github_actions:pull-request Trigger Pull Request Checks label Dec 1, 2023
@ovflowd ovflowd added this pull request to the merge queue Dec 1, 2023
Merged via the queue into main with commit 5e4852e Dec 1, 2023
18 checks passed
@ovflowd ovflowd deleted the feast/website-redesign-base-layouts branch December 1, 2023 21:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@canerakdas canerakdas canerakdas approved these changes

@AugustinMauroy AugustinMauroy AugustinMauroy approved these changes

Assignees
No one assigned
Labels
feature-request Requesting a new Technological Feature to be added to the Website infrastructure Issues/PRs related to the Repository Infra website redesign Issue/PR part of the Node.js Website Redesign
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@ovflowd @AugustinMauroy @canerakdas